<template>
	<uni-nav-bar fixed="true" statusBar="true" border="false" left-icon="left" title="行程评价" @clickLeft="back"></uni-nav-bar>
	<view class="container">
		<view class="uni-padding-wrap pt30 pb130">
			<view class="is-flex ac line-h70">
				本次线路体验评分&nbsp;&nbsp;<uni-rate :readonly="true" max="5" v-model="Data.travelLinesRecommendAddDto.recommendStar" />
			</view>
			<view class="w100 mb40">
				<view>评价内容</view>
				<view class="lineInfo">
					{{Data.travelLinesRecommendAddDto.recommendContent}}
				</view>
			</view>
			<view class="is-flex ac line-h70"> 
				本次行程领队评分&nbsp;&nbsp;<uni-rate :readonly="true" max="5" v-model="Data.travelLeaderRecommendAddDto.recommendStar" />
			</view>
			<view class="is-flex mb40">
				<view>评价内容</view>
				<view class="lineInfo">
					{{Data.travelLeaderRecommendAddDto.recommendContent}}
				</view>
			</view>
			<view class="" v-if="Data.travelLeaderRecommendAddDto.showUserDetail == 'T' && Data.travelLinesRecommendAddDto.showUserDetail == 'T'">已设置为匿名评价</view>
			<view class="" v-if="Data.travelLeaderRecommendAddDto.showUserDetail == 'F' && Data.travelLinesRecommendAddDto.showUserDetail == 'F'">未设置为匿名评价</view>
			<!-- <view class="">
				<uni-data-checkbox disabled="true" v-model="Data.travelLeaderRecommendAddDto.showUserDetail" :localdata="showUserDetails"/>
			</view> -->
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	// import cityData from '@/common/util/city.js'
	// import uPicker from '@/components/u-picker/u-picker.vue'
	export default {
		components: {
			// uPicker
		},
		data() {
			return {
				starValue:2,
				maxStar:5,
				showUserDetails:[ {
					text: '将本次评分设置为匿名',
					value: 'T'
				}],
				Data:{},
			}
		},
		computed: {
			
		},
		watch: {

		},
		onShow() {
		},
		onLoad(option) {
			if(option.param){
				let params = JSON.parse(decodeURIComponent(option.param));
				let travelItineraryId  = params.data.id;
				this.GetDetailInfo(travelItineraryId);
			}	
		},
		methods: {
			back(){
				uni.switchTab({
					url:'/pages/schdule/schdule'
				})
			},
			rate1Change(e){
				this.formData.travelLinesRecommendAddDto.recommendStar = e.detail.value();
			},
			rate2Change(e){
				this.formData.travelLeaderRecommendAddDto.recommendStar = e.detail.value();
			},
			showUserDetailChange(e){
				if(e.value == 'T'){
					this.formData.travelLeaderRecommendAddDto.showUserDetail='T';	
					this.formData.travelLinesRecommendAddDto.showUserDetail='T';	
				}else{
					this.formData.travelLeaderRecommendAddDto.showUserDetail='F';
					this.formData.travelLinesRecommendAddDto.showUserDetail='F';
				}
			},
			GetDetailInfo(ID) {
				let _this = this;
				api.viewrecommendItineraray({
					params: {
						travelItineraryId: ID,
					}
				}).then(res => {
					if (res.code === 0) {
						_this.Data = res.data;
					} else {}
				}).catch()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
	}
	
	.bottom-wrap{
		position: relative;
		top: -60rpx;
	}
	
	.is-flex{
		display: flex;
		align-items: center;
	}
	
	.xf-wrap {
		position: relative;
		top: -60rpx;
		overflow: hidden;
	}

	.box-shadow {
		box-shadow: 2rpx 2px 2rpx $uni-text-color-grey8;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.xf-wrap input {
		font-weight: bold;
	}

	.uni-flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.uni-row {
		flex-direction: row;
	}

	.sticky {
		height: 85rpx;
		line-height: 85rpx;
		background-color: #ffffff;
		width: 100%;
		color: #888;
		position: sticky;
		top: -1rpx;
		left: 0;
		right: 0;
		z-index: 999;
		text-align: center;
	}

	.sticky text {
		color: $uni-text-color-light-blue;
		font-weight: bold;
		padding: 10rpx 15rpx;
	}
	.sticky text.active{
		color: $uni-text-color-blue;
		border-bottom: 2px solid $uni-text-color-blue;
	}
	.xc-desc{
		text{
			margin-bottom: 30rpx;
			display: block;
		}
	}
	.xc-info{
		text{
			margin-left: 15rpx;
		}
		.map-text{
			color: $uni-text-color-blue;
			font-size: 16rpx;
			padding: 5rpx 10rpx;
			border: 1px solid $uni-text-color-blue;
			border-radius: 10rpx;
		}
	}
	.pb130{
		padding-bottom: calc( 130rpx + max(env(safe-area-inset-bottom),20px));
	}
	.share-reward{
		.color-black{
			display: block;
			margin-bottom: 20rpx;
		}
		.is-flex{
			align-items: flex-start;
		}
		.color-gray{
			line-height: 1.8;
			text-align: justify;
			margin-left: 20rpx;
		}
	}
	
</style>